<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h3>欢迎-登录</h3>
        <!-- 提示框 -->
        <div class="alert alert-success my-alert " role="alert">
            提示信息
        </div>
        <!-- 表单 -->
        <div class="form_wrap">
            <form action="javascript:;" class="login-form">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input name="username" type="text" class="form-control username" aria-describedby="usernameHelp">

                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input name="password" autocomplete="off" type="password" class="form-control password">
                </div>
                <button type="submit" class="btn btn-primary btn-login"> 登 录 </button>
            </form>
        </div>
    </div>
    <!-- 引入bootstrap.min.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.min.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
    <script src="../js/form-serialize.js"></script>
    <script>
        /*
      1. 点击登录 和 服务器通信
      2. 判断 用户名 和 密码的长度
      3. 提示信息
      4. 通过 form-serialize插件 快速收集表单元素的值
    */
        function myAlert(a, flag) {
            const tsk = document.querySelector('.my-alert')
            tsk.classList.add('show')
            tsk.innerHTML = a
            tsk.classList.add(flag ? 'alert-success' : 'alert-danger')
            setTimeout(() => {
                tsk.classList.remove('show')
                tsk.classList.remove(flag ? 'alert-success' : 'alert-danger')
            }, 2000)
        }
        const btn = document.querySelector('.btn-login')
        btn.addEventListener('click', function () {
            // let username = document.querySelector('.username').value
            // let password = document.querySelector('.password').value
            // console.log(username, password);
         const form = document.querySelector('.login-form')
         const {username,password} = serialize(form,{hash:true,empty:true})
         console.log(username,password);
         
            if (username.length < 8) {
                console.log('用户名必须大于八位');
                myAlert('用户名必须大于八位', false)
                return
            }
            if (password.length < 8) {
                console.log('密码必须大于六位');
                myAlert('密码必须大于六位', false)
                return
            }

            axios({
                url: 'http://hmajax.itheima.net/api/login',
                method: 'POST',
                data: {
                    username,
                    password
                }
            }).then(e => {
                console.log(e);
                console.log(e.data.message)
                myAlert(e.data.message, true)
            }).catch(l => {
                console.log(l.response.data.message)
                myAlert(l.response.data.message, false)
            })
        })
    </script>
</body>

</html>